<template>
  <div class="header">
    <router-link class="header-title" to="/" @click="tab(3)">
      <img src="@/assets/img/logo.png" alt="LOGO" />
    </router-link>

    <div class="header-tabs">
      <div class="header-tab">
        <router-link to="article" :class="index == 0 ? 'tabindex' : ''" @click="tab(0)">文章列表</router-link>
      </div>
      <div class="header-tab">
        <router-link to="music" :class="index == 1 ? 'tabindex' : ''" @click="tab(1)">收藏音乐</router-link>
      </div>
      <div class="header-tab">
        <router-link to="video" :class="index == 2 ? 'tabindex' : ''" @click="tab(2)">收藏视频</router-link>
      </div>
      <div class="header-tab">
        <span>{{ nowTime }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onBeforeMount } from "vue";
import router from "@/router/index";
import { nowTime, getNowTime } from "@/hooks/useNowTime";


interface Model {
  name: string;
  icon: string;
  nowTime: string;
  index: number;
  location: string;
  tab: (e: number) => void;
}

export default {
  name: "Header",
  setup() {
    const obj: Model = reactive({
      name: "呱呱的小窝",
      icon: "",
      nowTime,
      index: 3,
      location: router.options.history.location,
      tab: (e: number) => {
        obj.index = e;
      },
    });

    onBeforeMount(() => {
      const location: string = router.options.history.location;
      switch (location) {
        case "/music":
          obj.index = 1;
          break;
        case "/video":
          obj.index = 2;
          break;
        case "/article":
          obj.index = 0;
          break;
      }
    });

    // 当前的时间
    // const getNowTime = ()=>{
    //   const now = new Date();
    //   const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
    //   const minu = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
    //   const sec = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
    //   obj.nowTime = hour + ":" + minu + ":" + sec;
    //   setTimeout(getNowTime, 1000);   //每一秒执行一次这个方法
    // }

    getNowTime();

    const data = toRefs(obj);
    return { ...data };
  },
};
</script>

<style scoped lang="scss">
@media screen and (min-width: 600px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 60%;
    height: 60px;
    background: none rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20%;
    font-weight: 600;
    &-title {
      display: flex;
      align-items: center;
      span {
        font-size: 18px;
        color: black;
      }
      img {
        width: 120px;
      }
    }
    &-tabs {
      display: flex;
    }
    &-tab {
      margin-left: 25px;
      a {
        color: #FFF;
        text-shadow: 0px 2px 0px rgba(24, 24, 24, 0.2);
      }
      .tabindex {
        color: #cdd831;
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .header{
    display: none !important;
  }
}
</style>